.app-frame {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  width: 100%;
  border: 1px solid gray;
}
.app-frame.is-maximize {
  border: none;
}

.app-frame-header {
  flex: 0 0 auto;
  overflow: hidden;
  height: 30px;
  background-color: rgb(50, 50, 50);
  color: rgb(190, 190, 190);
  -webkit-app-region: drag;
}

.app-frame-footer {
  flex: 0 0 auto;
  overflow: hidden;
  height: 30px;
  background-color: rgb(50, 50, 50);
  color: rgb(190, 190, 190);
}

.app-frame-body {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
}

.app-frame-body-left {
  flex: 0 0 auto;
  width: 250px;
  overflow: hidden;
  background-color: rgb(36, 36, 36);
  color: rgb(230, 230, 230);
}

.app-frame-body-center {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: rgb(30, 30, 30);
  color: rgb(230, 230, 230);
}

.app-controls {
  float: right;
  -webkit-app-region: no-drag;
}

.app-menu-bar {
  float: left;
  -webkit-app-region: no-drag;
}

.app-frame-outside {
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}